<template>
        <div class="global-buttom-wrap">
            <label for="global-buttom" v-text="babel"></label>
            <button @click="clickBtn(e)" :class="customCls">{{buttonTxt}}</button>
        </div>
</template>
    
<script setup lang='ts'>
    let pros = withDefaults(defineProps<{
        babel?: string,
        buttonTxt?: string,
        clickFn?: Function,
        customCls?: Array<any>
    }>(), {
        babel: '这是解释button作用的文案',
        buttonTxt: '确定',
        customCls: () => ['warn'],
        clickFn: () => {
            console.log('default clickFn');
        }
    });

    let clickBtn = function(e: MouseEvent) {
        pros.clickFn(e);
        console.log('pros:', pros)
    }
</script>
    
<style lang="less" scope>
    #borders() {
        wrapBorder: 1px solid red;
        buttonBorder: 1px dashed green;
    }
    .global-buttom-wrap {
        width: 10rem;
        height: 5rem;
        border: #borders[wrapBorder];
        .warn {
            background-color: red;
            padding: 10px;
            border-radius: 10px;
        }
        .success {
            background-color: green;
            padding: 10px;
            border-radius: 10px;
        }
    }
</style>